<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
	
<f:view contentType="text/html">
<h:head>
	<title>
		<ui:insert name="title">PrimeFaces ShowCase</ui:insert>
	</title>
	<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/aristo/skin.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css"></link>
	<style type="text/css">
		body {
			background: url(../images/macosx/macback.png);
			margin: 0;
			padding: 0;
			font-family: geneva, arial, helvetica, sans-serif;
			font-size:80%;
		}

		.ui-menuitem-icon.ui-icon.appleIcon {
			background: url(../images/macosx/apple.png) no-repeat;
            width:16px;
            height:16px;
            border-radius:0px;
		}

        .ui-dialog .ui-terminal {
            border:0;
        }

        .ui-dialog.terminalDialog .ui-dialog-content {
            padding:0;
        }
	</style>
</h:head>

<h:body>

	<h:outputText value="#{macosxBean.text}" />

	<p:growl showDetail="true" sticky="true"/>

	<p:menubar>
		<p:submenu icon="appleIcon">
			<p:menuitem value="About This Mac" url="#" onclick="PF('info').show();" icon="ui-icon ui-icon-info"></p:menuitem>
		</p:submenu>
				
		<p:submenu label="Finder">
			<p:menuitem value="About Finder" url="#" styleClass="open" icon="ui-icon ui-icon-info"></p:menuitem>
		</p:submenu>
		
		<p:submenu label="Edit">
			<p:menuitem value="Undo" url="#" styleClass="undo" icon="ui-icon ui-icon-arrowreturnthick-1-w"></p:menuitem>
			<p:menuitem value="Redo" url="#" styleClass="redo" icon="ui-icon ui-icon-arrowreturnthick-1-e"></p:menuitem>
		</p:submenu>
		
		<p:submenu label="View">
			<p:menuitem value="Source" url="#" onclick="PF('source').show();" icon="ui-icon ui-icon-search"></p:menuitem>
		</p:submenu>
	</p:menubar>
		
	<p:dialog header="About This Mac" draggable="true" widgetVar="info" showEffect="fade" hideEffect="fade">
		<h:form>
			<h:panelGrid columns="1" style="width:100%;text-align:center;">
				<p:graphicImage value="/images/macosx/apple_logo.png" />
				<h:outputText value="MOCK OS X" style="font-size:16px"/>
				<h:outputText value="Version 10.5.7" />
				<p:commandButton value="Software Update" async="true" onclick="return false;"/>
			</h:panelGrid>
			
			<h:panelGrid columns="2">
				<h:outputText value="Processor" style="font-weight:bold"/>
				<h:outputText value="2.4 GHz Intel Core 2 Duo" />
				
				<h:outputText value="Memory" style="font-weight:bold"/>
				<h:outputText value="4 GB 667 MHz DDR2 SDRAM" />
				
				<h:outputText value="Startup Disk" style="font-weight:bold"/>
				<h:outputText value="Macintosh HD" />
			</h:panelGrid>
			
		</h:form>
	</p:dialog>
	
	<p:dialog header="PrimeFaces Mock OS X" draggable="true" visible="true" modal="true" showEffect="fade" hideEffect="fade">
		<h:outputText value="Welcome! Everything here is a PrimeFaces JSF component." />
	</p:dialog>
	
	<p:dialog widgetVar="terminal" width="600" height="400" header="Terminal" resizable="false" showEffect="fade" hideEffect="fade"
              styleClass="terminalDialog">
        <h:form>
            <p:terminal commandHandler="#{terminalController.handleCommand}" style="width:590px"
                    welcomeMessage="Welcome to PrimeFaces Terminal, how are you today? Try date and greet  commands."/>
        </h:form>
    </p:dialog>
	
	<p:dialog header="Source" widgetVar="source" height="400" width="600">

			<pre name="code" class="xml">
			
&lt;p:growl showDetail="true" sticky="true"/&gt;

&lt;p:menubar&gt;
	&lt;p:submenu icon="appleIcon" label="&nbsp;"&gt;
		&lt;p:menuitem value="About This Mac" url="\#" onclick="PF('info').show();"&gt;&lt;/p:menuitem&gt;
	&lt;/p:submenu&gt;
			
	&lt;p:submenu label="Finder"&gt;
		&lt;p:menuitem value="About Finder" url="\#" styleClass="open"&gt;&lt;/p:menuitem&gt;
	&lt;/p:submenu&gt;
	
	&lt;p:submenu label="Edit"&gt;
		&lt;p:menuitem value="Undo" url="\#" styleClass="undo" helpText="‚åòZ"&gt;&lt;/p:menuitem&gt;
		&lt;p:menuitem value="Redo" url="\#" styleClass="redo" helpText="‚åòY"&gt;&lt;/p:menuitem&gt;
	&lt;/p:submenu&gt;
	
	&lt;p:submenu label="View"&gt;
		&lt;p:menuitem value="Source" url="\#" onclick="source.show();"&gt;&lt;/p:menuitem&gt;
	&lt;/p:submenu&gt;
&lt;/p:menubar&gt;
	
&lt;p:dialog header="About This Mac" draggable="true" widgetVar="info" showEffect="fade" hideEffect="fade"&gt;
	&lt;h:form&gt;
		&lt;h:panelGrid columns="1" style="width:100%;text-align:center;"&gt;
			&lt;p:graphicImage value="/images/macosx/apple_logo.png" /&gt;
			&lt;h:outputText value="MOCK OS X" style="font-size:16px"/&gt;
			&lt;h:outputText value="Version 10.5.7" /&gt;
			&lt;p:commandButton value="Software Update" async="true" onclick="return false;"/&gt;
		&lt;/h:panelGrid&gt;
		
		&lt;h:panelGrid columns="2"&gt;
			&lt;h:outputText value="Processor" style="font-weight:bold"/&gt;
			&lt;h:outputText value="2.4 GHz Intel Core 2 Duo" /&gt;
			
			&lt;h:outputText value="Memory" style="font-weight:bold"/&gt;
			&lt;h:outputText value="4 GB 667 MHz DDR2 SDRAM" /&gt;
			
			&lt;h:outputText value="Startup Disk" style="font-weight:bold"/&gt;
			&lt;h:outputText value="Macintosh HD" /&gt;
		&lt;/h:panelGrid&gt;
		
	&lt;/h:form&gt;
&lt;/p:dialog&gt;

&lt;p:dialog widgetVar="terminal" width="600" height="400" header="Terminal" resizable="false" showEffect="fade" hideEffect="fade"&gt;
    &lt;h:form&gt;
        &lt;p:terminal widgetVar="term" commandHandler="\#{terminalController.handleCommand}" style="width:590px"
                welcomeMessage="Welcome to PrimeFaces Terminal, how are you today? Try date and greet  commands."/&gt;
    &lt;/h:form&gt;
&lt;/p:dialog&gt;

&lt;p:dialog widgetVar="terminal" styleClass="terminal" width="600" height="400" header="Terminal" showEffect="fade" hideEffect="fade"
    styleClass="terminalDialog"&gt;
	&lt;h:form&gt;
	&lt;p:terminal commandHandler="\#{terminalController.handleCommand}" width="100%" height="100%" 
				welcomeMessage="Welcome to PrimeFaces Terminal, how are you today?"/&gt;
	&lt;/h:form&gt;
&lt;/p:dialog&gt;

&lt;p:dock&gt;
	&lt;p:menuitem label="Finder" icon="/images/macosx/finder.png" url="\#" /&gt;
	&lt;p:menuitem label="Terminal" icon="/images/macosx/terminal.png" url="\#" onclick="PF('terminal').show();"/&gt;
	&lt;p:menuitem label="Safari" icon="/images/macosx/safari.png" url="\#" /&gt;
	&lt;p:menuitem label="iTunes" icon="/images/macosx/itunes.png" url="\#"/&gt;
	&lt;p:menuitem label="iChat" icon="/images/macosx/ichat.png" url="\#"/&gt;
	&lt;p:menuitem label="Trash" icon="/images/macosx/trash.png" url="\#"/&gt;
&lt;/p:dock&gt;

&lt;p:stack icon="/images/stack/stack.png"&gt;
    &lt;p:menuitem value="Aperture" icon="/images/stack/aperture.png" url="#" /&gt;
    &lt;p:menuitem value="Photoshop" icon="/images/stack/photoshop.png" url="#"/&gt;
    &lt;p:menuitem value="Coda" icon="/images/stack/coda.png" url="#"/&gt;
    &lt;p:menuitem value="Safari" icon="/images/stack/safari.png" url="#" /&gt;
    &lt;p:menuitem value="Finder" icon="/images/stack/finder.png" url="#" /&gt;
&lt;/p:stack&gt;
			</pre>

	</p:dialog>
	
	<p:dock>
		<p:menuitem value="Finder" icon="/images/macosx/finder.png" url="#" />
		<p:menuitem value="Terminal" icon="/images/macosx/terminal.png" url="#" onclick="PF('terminal').show();"/>
		<p:menuitem value="Safari" icon="/images/macosx/safari.png" url="#" />
		<p:menuitem value="iTunes" icon="/images/macosx/itunes.png" url="#"/>
		<p:menuitem value="iChat" icon="/images/macosx/ichat.png" url="#"/>
		<p:menuitem value="Trash" icon="/images/macosx/trash.png" url="#"/>
	</p:dock>

    <p:stack icon="/images/stack/stack.png">
		<p:menuitem value="Aperture" icon="/images/stack/aperture.png" url="#" />
		<p:menuitem value="Photoshop" icon="/images/stack/photoshop.png" url="#"/>
		<p:menuitem value="Coda" icon="/images/stack/coda.png" url="#"/>
		<p:menuitem value="Safari" icon="/images/stack/safari.png" url="#" />
		<p:menuitem value="Finder" icon="/images/stack/finder.png" url="#" />
	</p:stack>
    
    <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
    <script language="javascript">
        dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
	
</h:body>


</f:view>

</html>

	